<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>D3交互式数据可视化</title>
</head>
<body>
	<ul>
		<li>定义域、值域、对应法则  ====   比例尺，定量比例尺</li>
		<li>比例尺就像一个函数，调用时需要传入参数----linear(110)</li>
		<li>
			<strong>线性比例尺</strong>
			<ul>
				<li>d3.scale.linear()  -- 创建一个线性比例尺</li>
				<li>linear(x) -- 输入一个在定义域内的值x，返回值域对应的值</li>
				<li>linear.invert(y) -- 输入一个在值域的值，返回定义域内对应的值</li>
				<li>linear.domain([numbers]) -- 设定或获取定义域</li>
				<li>linear.range([values]) --设定或获取值域</li>
				<li>linear.rangeRound([values]) -- 比例尺的值会进行四舍五入的运算，结果为整数</li>
				<li>linear.clamp([boolean]) -- 处理超出范围的值</li>
				<li>linear.nice([count]) -- 将定义域的范围扩展成比较理想的形式</li>
				<li>linear.ticks([count]) -- 设定或获取定义域内具有代表性的值的数目</li>
				<li>linear.tickFormat(count[,format]) -- 设置定义域内具有代表性的值的表现形式</li>
			</ul>
		</li>
		<li>
			<strong>指数和对数比例尺</strong>
			<li>指数比例尺内部调用了线性比例尺，且把这个线性比例尺定义域的边界变成了其指定次方</li>
		</li>
		<li>
			<strong>量子和分位比例尺</strong>
			<li>量子比例尺：定义域是连续的值域是离散的 -- 很适合处理类似“数值对应颜色”的问题</li>
			<li>量子比例尺的分段值只与定义域的起始值和结束值有关</li>
			<li>分为比例尺的分段值与定义域中存在的数值有关，可以使用quantile.quantiles()查询分位比例尺的分段值</li>
		</li>
		<li>
			<strong>阀值比例尺</strong>
			<li>和量子比例尺、分位比例尺相似</li>
		</li>
		<li>
			<strong>序数比例尺</strong>
			<li>定义域和值域都是离散的</li>
		</li>
	</ul>
	<div class="svg"></div>
	<div class="svg2"></div>
	<script src="js/d3_3.5.7.js"></script>
	<script>
		var linear = d3.scale.linear()
						.domain([0,500]) //定义域
						.range([0,100]) //值域
						//.clamp(true)
		// console.log(linear(600))
		// console.log(linear.invert(120))
		// console.log(linear.domain())
		// console.log(linear.range())
		//console.log(linear.rangeRound([123,142]))
		// console.log(linear.ticks(10))
		var pow = d3.scale.pow().exponent(3);
		console.log(pow(2))
		console.log(pow(3))
		//量子比例尺
		var quantize = d3.scale.quantize()
			.domain([50,0])
			.range(["#888","#666","#444","#222","#000"])
		var r = [45,35,25,15,5];
		var svg = d3.select(".svg").append("svg")
					.attr("width",400)
					.attr("height",400)
		svg.selectAll("circle").data(r).enter().append("circle")
			.attr("cx",function(d,i) {
				return 50 + i * 30
			})
			.attr("cy",50)
			.attr("r",function(d) {
				return d
			})
			.attr("fill",function(d) {
				return 	quantize(d)
			})
		// var color = d3.scale.category10();
		// console.log(color("test"))
		var width = 600;
		var height = 600;
		var colorData = d3.range(5);

		var color = d3.scale.category10();
		var svg2 = d3.select(".svg2").append("svg")
					.attr("width",width)
					.attr("height",height)

		var circle = svg2.selectAll("circle")
						.data(colorData)
						.enter()
						.append("circle")
						.attr("cx",function(d,i) {
							return 30 + i * 80
						})
						.attr("cy",100)
						.attr("r",30)
						.attr("fill",function(d,i) {
							return color(i)
						})
	</script>
</body>
</html>